import { useEffect, useState } from 'react';
// import { useProductsByOrgId } from '@/services/product';
import {
  Card, Grid, Image, Result,
} from 'antd-mobile';
import axios from 'axios';
import style from './index.module.less';
import { useGoTo } from '@/hooks';
import { ROUTE_KEY } from '@/routes/menu';

const RecommendProducts = () => {
// const RecommendProducts = () => {
  const [products, setproducts] = useState([]);
  useEffect(() => {
    getlist();
  }, []);
  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/product');
    setproducts(data.data);
  };
  function shuffleArray(products:any) {
    for (let i = products.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [products[i], products[j]] = [products[j], products[i]];
    }
    return products;
  }
  const randomElements = shuffleArray(products).slice(0, 3);
  const { go } = useGoTo();
  const goProduct = (id: string) => {
    go(ROUTE_KEY.PRODUCT_INFO, { id });
  };

  if (!products) {
    return <Result title="提示" description="该门店下没有推荐课程" />;
  }

  return (
    <Card className={style.container} title="推荐课程">
      {
        randomElements?.map((item:any) => (
          <div key={item.id}>
            <Grid columns={12} key={item.id} className={style.item}>
              <Grid.Item span={2}>
                <Image src={item.coverUrl} alt="封面图" className={style.img} onClick={() => goProduct(item.id)} />
              </Grid.Item>
              <Grid.Item span={8} className={style.content}>
                <div className={style.title} onClick={() => goProduct(item.id)}>{item.name}</div>
                <div className={style.desc}>
                  <span className={style.descContent}>{item.desc}</span>
                  <span className={style.count}>
                    已售&nbsp;
                    {item.buyNumber || 0}
                  </span>
                </div>
              </Grid.Item>
              <Grid.Item span={2}>
                <div className={style.price}>
                  ￥
                  {item.preferentialPrice}
                </div>
                <div className={style.oldPrice}>
                  ￥
                  {item.originalPrice}
                </div>
              </Grid.Item>
            </Grid>
          </div>
        ))
      }
    </Card>
  );
};

export default RecommendProducts;
